<template>
    <view v-if="pageInit" style="width: 750rpx;display: flex;flex-direction: column;align-items: center;">
        <view class="title">
            {{articleObj.title}}
        </view>
        <view class="tipWrapper">
            <view class="left">
                来源
                <view class="text">
                    {{articleObj.source}}
                </view>
            </view>
            <view class="right">
                {{articleObj.createTime}}
            </view>
        </view>

        
        <view class="content" v-if="articleObj.isContent==false">
            <view class="nodes">
                <view class="node" v-for="(node, index) in articleObj.nodes" :key="node.id">
                   <textarea :disabled="true"
                        class="text" auto-height="true" maxlength="-1" v-if="node.type == 'text'"
                        :value="node.content">
                    </textarea>
                   
                    
                    <image class="image" v-if="node.type=='image'" :src="node.url">
                    </image>
                </view>
            </view>
        </view>
        <view class="content" v-else :class="{contentHidden:isSinglePage}">
			<u-parse :content="articleObj.content">
				
			</u-parse>
            <!-- <rich-text :user-select="true"	:nodes="articleObj.content"></rich-text> -->
        </view>
        
        <template v-if="isSinglePage">
            <view  class="contentMask" style="">
                点击右下方"前往小程序"查看完整内容
                <view class="mask">
                    
                </view>
            </view>
            <view class="" style="height: 150rpx;">
                
            </view>
        </template>

        <template v-else>
            <view class="" style="height: 150rpx;">
                
            </view>
            
            <view class="line">
                
            </view>
            <view class="viewContainer">
                <view class="left">
                    <image class="icon" src="@/pages/shop/static/image/article_list_icon_liu.png" mode=""></image>
                    {{articleObj.views}}
                </view>
            </view>
        </template>

        <share-button :backgroundBtn="'#5E9FFD'"  
			@onShare="onShare"	
        ></share-button>

        
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")

    
    let that = null
    

    export default {
        data() {
            return {
                sequence:0,
                articleId:"",
                articleObj: {
                    cover: "",
                    title: "",
                    nodes: [],
                    createTime: "",
                    scanCount: "",
                    content:"",
                    isContent:true,
                    source:''
                },
                pageInit: false,
                isSinglePage: false,
            };
        },
        components: {
         
        },
        onLoad(options) {
            that = this;
            
            if (uni.getStorageSync("singlePage")){
                this.isSinglePage = true;
            }
            
            if (options.id&&options.id.length>0){
                that.articleId = options.id;
                that.getArticleDetail(options.id)           
            }
        },

        methods:{
            setArticleObj(res){				
                that.articleObj.source = res.data.source||"";
                that.articleObj.cover = res.data.cover||"";
                that.articleObj.title = res.data.title||"";
                that.articleObj.views = res.data.pageViews||'0';
                if (res.data.createTime){
                    that.articleObj.createTime = utils.formatTime(res.data.createTime, 'yyyy-MM-dd hh-mm-ss')
                }else{
                    that.articleObj.createTime = ""
                } 

            
                if(utils.isJSON(res.data.content)){
                    console.log(JSON.parse(res.data.content))   
                    that.articleObj.isContent = false                      
                    var list = JSON.parse(res.data.content)||[]; 
                    that.initNodes(list);
                }else{
                    that.articleObj.isContent = true;
                    that.articleObj.content = utils.replaceSpecialChar(res.data.content);
                }

				that.shareTitleMixins = that.articleObj.title;
				that.shareImageMixins = that.articleObj.cover; 
            },
         
            getArticleDetail(id){
                api.getArticleDetail({
                    interfaceName: id,
                    param: {
            
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        that.setArticleObj(res);
                        that.pageInit = true
                    }
                })              
            },
            obtainSequence() {
                this.sequence++;
                return this.sequence;
            },
            
            initNodes(initList) {
                var list = initList || [];
                if (Object.prototype.toString.call(list) != "[object Array]") {
                    throw new Error("数据格式不正确！")
                }
                var nodes = [];
                for (var i = 0; i < list.length; i++) {
                    var ele = list[i];
                    if (ele.type == "text") {
                        var node = {};
                        node.type = "text";
                        node.id = this.obtainSequence();
                        node.content = ele.content || "";
                        nodes.push(node);
                    } else if (ele.type == "image") {
                        var node = {};
                        node.type = "image";
                        node.id = this.obtainSequence();
            
                        node.url = ele.url || "";
                        nodes.push(node);
                    }
                }
                this.articleObj.nodes = nodes;
                this.trimNodes();
            },
            trimNodes() {
                var list = this.articleObj.nodes;
                var nodes = [];
                var temp = null;
                for (var i = 0; i < list.length; i++) {
                    var node = list[i];
                    if (node.type == "image") {
                        nodes.push(node);
                        temp = null;
                        continue;
                    }
                    if (!temp) {
                        temp = node;
                        nodes.push(temp);
                        continue;
                    }
                    if (node.type == "text") {
                        temp.content += node.content;
                    }
                }
                if (nodes.length == 0 || nodes[nodes.length - 1].type != "text") {
                    var node = {};
                    node.id = this.obtainSequence();
                    node.type = "text";
                    node.content = "";
                    nodes.push(node);
                }
                this.articleObj.nodes = nodes;
            },
        }
    }
</script>

<style lang="scss">
    .title{
        width: 700rpx;
        font-size: 40rpx;
        color: #121212;
        margin-top: 52rpx;
        margin-bottom: 30rpx;
    }
    .tipWrapper{
        display: flex;
        align-items: center;
        width: 700rpx;     
        margin-bottom: 66rpx;
        margin-left: 40rpx;
        .left{
            display: flex;
            font-size: 28rpx;
            color: #666666;
            margin-right: 40rpx;
            .text{
                margin-left: 15rpx;
                max-width: 400rpx;
                color: #576B95;
            }
        }
        .right{
            font-size: 26rpx;
            color: #ababab;
        }
    }
   
   .content {
        width: 700rpx;
        display: flex;
        flex-direction: column;
        margin-bottom: 30rpx;
        overflow: hidden;
        .nodes {
            width: 100%;
            min-height: 300rpx;

            .node {
                width: 100%;
                position: relative;
                overflow: hidden;
                margin-bottom: 30rpx;
                .text {
                    width: 100%;
                    font-size: 30rpx;
                    color: #121212;
                }
            }
        }


        .image {
            width: 95%;
            border-radius: 20rpx;
        }
    }
    .contentHidden{
        max-height: 950rpx;
    }
    .contentMask{
        color: #EE6666;
        position: relative;
        width: 750rpx;
        text-align: center;
        line-height: 50rpx;
        font-size: 28rpx;
        .mask{
            width: 750rpx;
            height: 500rpx;
            top: -500rpx;
            left: 0;
            position: absolute;
            background: 100% 100%;
            background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2));
        } 
    }
    
    .line{
        width: 750rpx;
        height: 1px;
        background-color: #e3e3e3;
    }

    .bottomContainer{
        width: 700rpx;
        height: 150rpx;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #ababab;
            margin-left: 30rpx;
            .icon{
                width: 33rpx;
                height: 33rpx;
                margin-right: 15rpx;
            }
        }
   
        .shareBtn {
            border: none;
            padding: 0;
            margin: 0;
        
            .container {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 190rpx;
                height: 72rpx;
                background-color: #16a5fe;
                border-radius: 32rpx;
                color: #ffffff;
                font-size: 30rpx;
                .icon {
                    width: 34rpx;
                    height: 34rpx;
                    margin-right: 11rpx;
                }
            }
        
        }
        
    }
    .viewContainer{
        width: 700rpx;
        height: 104rpx;
        background-color: #ffffff;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        .left{
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #ababab;
            .icon{
                width: 33rpx;
                height: 33rpx;
                margin-right: 15rpx;
            }
        }
     
    }
</style>
